<template>
  <div :class="className">
    <a-card class="card-item" :class="active ? 'active' : ''" hoverable bordered>
      <div class="patient-level" :style="{ background: nursingGrade[data.nurseLevelIcon] }">{{ data.nurseLevelIcon }}</div>
      <div class="card-content">
        <div class="item-header">
          <a-avatar :src="avatarMan" />
          <div class="flex-1 ml-2">
            <div class="flex justify-between font-bold">
              <!-- is-modify -->
              <InPatientPopover :patient-info="data" :is-modify="isModify" @change="emit('change')">
                <div class="font-bold hover:underline" :class="active ? '' : 'hover:text-primary'">{{ data.brName || '姓名' }}</div>
              </InPatientPopover>
              <div class="flex">
                <!-- <RoundTag v-if="data.isNmiYbdj === 1" bg-color="#3758f1">医</RoundTag>
                <RoundTag v-else bg-color="#2db7f5">自</RoundTag> -->
                <div class="flex ml-2">
                  <!-- 付费方式 -->
                  <RoundTag v-if="data.paymentTypeCode === 'YLFFFS001'" bg-color="#3758f1">居</RoundTag>
                  <RoundTag v-if="data.paymentTypeCode === 'YLFFFS002'" bg-color="#3758f1">职</RoundTag>
                  <RoundTag v-if="data.paymentTypeCode === 'YLFFFS003'" bg-color="#ff00dc">自</RoundTag>
                </div>
                <RoundTag v-if="data.chargeStatus === 1" bg-color="#f97316" class="ml-2">结</RoundTag>
              </div>
              <div class="bed-num font-bold max-w-[110px] truncate" :title="data.lastBedCode">
                <span v-if="data.roomName">{{ data.roomName }}-</span>
                <span>{{ data.lastBedCode || '床位号' }}</span>
              </div>
            </div>
            <div class="flex justify-between text-xs">
              {{ data.brXb }}{{ data.brAge }}
              <div class="truncate w-24 text-right" :title="data.ksmc">{{ data.ksmc }}</div>
            </div>
          </div>
        </div>
        <div class="mb-2 pl-3 pr-2">
          <LabelValue label-class="text-right w-20" label="住院号" :value="data.admissionCode" />
          <LabelValue label-class="text-right w-20" label="入院诊断" :width="240" :value="data.ryzd" />
          <LabelValue label-class="text-right w-20" :width="240" label="部位" :value="data.bws" />
          <LabelValue label-class="text-right w-20" label="住院医师" :value="data.lastInpDoctorName" />
          <LabelValue label-class="text-right w-20" label="责任护士" :value="data.lastDutyNurseName" />
          <LabelValue
            v-if="data.lastDeptRegTime"
            label-class="text-right w-20"
            value-class="!pr-0"
            :width="240"
            label="入区时间"
            :value="dayjs(data.lastDeptRegTime).format('YYYY-MM-DD HH:mm') + ' ' + (data.zyts || data.days) + '天'"
          />
          <LabelValue v-if="data.rycs" label-class="text-right w-20" :width="240" label="入院次数" :value="data.rycs + '次'" />
        </div>
        <div v-if="showFooter" class="patient-status">
          <a-space>
            <RoundTag v-if="data.isDischarge" bg-color="#22c55e">出</RoundTag>
            <RoundTag v-if="data.bgStatus" bg-color="#ff00dc">糖</RoundTag>
            <RoundTag v-if="data.todayInArea" bg-color="#62d">新</RoundTag>
            <RoundTag v-if="data.isTransferZone">转</RoundTag>
            <RoundTag v-if="data.oprAptmArgmInfoList?.length" bg-color="#f50">术</RoundTag>
          </a-space>
          <div class="flex items-center">
            <a-dropdown class="mr-2">
              <RoundTag v-if="data.bjbw === 0">普</RoundTag>
              <RoundTag v-if="data.bjbw === 1" bg-color="#f50">重</RoundTag>
              <RoundTag v-if="data.bjbw === 2" bg-color="#f00">危</RoundTag>
              <template #overlay>
                <a-menu :selected-keys="['0']" @click="onChangeCondition">
                  <a-menu-item key="0"><a-button type="link" size="small">普通</a-button></a-menu-item>
                  <a-menu-item key="1"> <a-button danger type="text" size="small">病重</a-button></a-menu-item>
                  <a-menu-item key="2"><a-button danger type="text" size="small">病危</a-button></a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <!-- 医疗类别 -->
          <div class="absolute bottom-2 right-2">
            <a-space>
              <RoundTag v-if="data.inpTypeCode === '21'">普</RoundTag>
              <RoundTag v-if="data.inpTypeCode === '25'">异</RoundTag>
              <RoundTag v-if="data.inpTypeCode === '28'">日</RoundTag>
            </a-space>
            <a-space class="ml-2">
              <RoundTag v-for="item in data.highRiskNames" :key="item" bg-color="#f50100">{{ item.slice(0, 1) }}</RoundTag>
            </a-space>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import avatarMan from '@/assets/images/avatar-man.png'
import LabelValue from '@/components/LabelValue'
import { nursingGrade } from '@/utils/enums'
import InPatientPopover from '@/components/InPatientPopover'

const emit = defineEmits('change')
const props = defineProps({
  active: {
    type: Boolean,
    default: false
  },
  showFooter: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  },
  className: {
    type: String,
    default: ''
  },
  isModify: {
    type: Boolean,
    default: false
  }
})

const onChangeCondition = async ({ key }) => {
  const { code, msg } = await post('/inp/zyhs/doIdentifyPatientCondition', {
    inplsh: props.data.inplsh,
    bwzt: key
  })
  if (code === 0) {
    message.success('修改成功')
    emit('change')
  } else {
    message.error(msg || '修改失败')
  }
}
</script>
<style lang="less" scoped>
.card-item {
  width: 272px;
  margin: 0 auto;
  border: 1px solid #c9c9c9;
  &.active {
    border: 1px solid var(--primary-color);
    :deep(.ant-card-body) {
      .item-header {
        color: #ffffff !important;
        background-color: var(--primary-color);
      }
      .bed-num {
        color: #ffffff !important;
      }
    }
  }
  &:hover {
    border: 1px solid var(--primary-color);
  }
  .patient-level {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 24px;
    color: #fff;
    text-align: center;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  :deep(.ant-card-body) {
    height: 100%;
    padding: 0;
    .card-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      .item-header {
        position: relative;
        display: flex;
        margin-bottom: 8px;
        padding: 8px 16px;
        &::after {
          position: absolute;
          bottom: 0;
          left: 6%;
          width: 88%;
          height: 2px;
          border-bottom: 2px dashed #00000010;
          content: '';
        }
      }
      .bed-num {
        color: var(--primary-color);
      }
    }
  }
  .patient-status {
    display: flex;
    justify-content: space-between;
    height: 41px;
    padding: 8px 16px;
    border-top: 1px solid #00000010;
  }
}
</style>
